<template>
    <el-form-item label="广告系列状态" style="margin-bottom:0" >
        <div slot="label" class="flexbox flexcenter">
            <el-switch :disabled="disabled" style="margin-right:5px" class="cust_switch" @change="changeStatus" width="28" v-model="dataForm.campaign.budget_mode_status" active-value="BUDGET_MODE_DAY" inactive-value="BUDGET_MODE_INFINITE">
            </el-switch>
            设置广告系列预算 
            <div class="flexbox flexcenter red" v-if="dataForm.campaign.budget_mode_status=='BUDGET_MODE_DAY'">
                <i class="el-icon-warning-outline"></i>
                注意：开启后广告组的预算类型要与此处保持一致
            </div>
        </div>
        <el-form-item label="" :prop="`campaign.budget`" :rules="createRules.checkPrice"  v-if="dataForm.campaign.budget_mode_status=='BUDGET_MODE_DAY'">
            <el-input placeholder="50.00以上" style="width:246px" v-model="dataForm.campaign.budget" class="tk_input" @change="sessionSave" :disabled="disabled">
                <span slot="suffix" style="line-height:32px;color:#17233D;margin-right:5px">USD</span>
                <el-select v-model="dataForm.campaign.budget_mode" slot="prepend" placeholder="" class="tk_select" @change="sessionSave" :disabled="disabled">
                    <el-option label="日预算" value="BUDGET_MODE_DAY"></el-option>
                    <el-option label="总预算" value="BUDGET_MODE_TOTAL"></el-option>
                </el-select>
            </el-input>
        </el-form-item>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        var checkPrice = (rule, value, callback) => {
            let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            let price = Number(value)
            if (!reg.test(price)) {
                return callback(new Error("系列预算应为 50.00 - 10,000,000.00间"));
            } else if (price < 50 || price > 10000000) {
                return callback(new Error("系列预算应为 50.00 - 10,000,000.00间"));
            } else {
                callback();
            }
        };
        return {
            noset: "",
            disabled:false,
            createRules:{
                checkPrice: [
                    {required: true,message: "请输入",trigger: ["blur", "change"],},
                    { validator: checkPrice, trigger: ["blur", "change"] },
                ],
            }
        };
    },
     watch: {
            // 开启深度监听  
            dataForm: {  
            handler(newVal, oldVal) {
                this.disabled = newVal.campaign.campaign_id ? true : false
            },  
            deep: true,
            immediate: true, 
            }  
        },
    created() {
        this.$bus.on("tkFormSeries", (value) => {
            this.disabled = value == 'new' ? false : true
        })
    },
    methods: {
        changeStatus() {
            if(this.dataForm.campaign.budget_mode_status=="BUDGET_MODE_INFINITE"){
                this.dataForm.campaign.budget_mode = "BUDGET_MODE_INFINITE"
                this.dataForm.campaign.budget = ""
            }else{
                this.dataForm.campaign.budget_mode = "BUDGET_MODE_DAY"
                this.dataForm.campaign.budget = ""
            }

            this.sessionSave()
        },
        sessionSave(){
            this.$emit("sessionSave")
        }
    },
};
</script>


<style scoped>
/deep/ .tk_select .el-input {
    width: 86px;
}
/deep/ .tk_input .el-input-group__prepend {
    background-color: #fff;
}
.red{
    font-size: 12px;
    color: #ff3c31;
    margin-left: 10px;
}
.red .el-icon-warning-outline{
    font-size: 14px;
    margin-right: 5px;
}
</style>

